<template>
  <div id="dataOverview" class="data-overview-wrap">
    <div class="data-overview">
      <div class="data-overview__overview">
        <div class="data-overview__overview-hd">
          <span class="data-overview__overview-title">数据概览
            <span class="overview-title__desc">特别说明：数据分析及财务报表可统计到昨日数据</span>
          </span>
          <span class="data-overview__tips" @mouseover="open" @mouseout="close" />
          <div v-if="is_show" class="data-overview__tips-bd" style="width: 600px; right: -2px;">
            <p class="data-overview__tips-item">
              <strong class="data-overview__tips-label">收入金额：</strong>收入金额为系统实收金额，统计截止到昨日，收入金额的统计方法可参照“财务报表——收入统计”
            </p>
            <p class="data-overview__tips-item"><strong
              class="data-overview__tips-label"
            >耗卡金额：</strong>耗卡金额为通过会员卡进行各种消费，系统自动按照规则折合成金额统计，统计截止到昨日，耗卡金额的统计方法可参照“财务报表——耗卡统计”
            </p>
            <p class="data-overview__tips-item"><strong
              class="data-overview__tips-label"
            >剩余资产金额：</strong>剩余资产金额，表示会员卡内的剩余额度，系统自动按照规则转化成金额的剩余资产统计，统计为实时数据，数据统计延迟10分钟，剩余资产的统计方法可参照“财务报表——资产负债表”
            </p>
          </div>
        </div>
        <div class="data-overview__overview-bd">
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">本月收入金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.this_money_money }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">本月耗卡金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.this_money_consume_card }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">上月收入金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.last_money_money }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">上月耗卡金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.last_money_consume_card }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">本年收入金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.this_year_money }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">本年耗卡金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.this_year_consume_card }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">总收入金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.all_money }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">总耗卡金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.all_consume_card }}</div>
          </div>
          <div class="data-overview__overview-item">
            <div class="data-overview__overview-item-title">剩余资产金额（元）</div>
            <div class="data-overview__overview-item-value">{{ list.syzc }}</div>
          </div>
        </div>
      </div>
      <div class="data-overview__ranking">
        <div class="data-overview__section posr">
          <div class="data-overview__section-hd">
            <div class="data-overview__section-hd-title">上课耗卡排行榜</div>
            <div class="data-overview__section-hd-switch">
              <span class="data-overview__cycle" :class="skhktime == 1?'current':''" @click="skhk(1)">本月</span>
              <span class="data-overview__cycle" :class="skhktime == 2?'current':''" @click="skhk(2)">上月</span>
              <span class="data-overview__cycle" :class="skhktime == 3?'current':''" @click="skhk(3)">本年</span>
            </div>
          </div>
          <div class="data-overview__section-bd">
            <div class="data-overview__section-bd-hd"><span class="data-overview__section-label">排名</span> <span
              class="data-overview__section-label"
            >会员</span> <span
              class="data-overview__section-label"
            >耗卡金额</span></div>
            <div class="data-overview__section-bd-list">
              <div class="data-overview__list-item">
                <span class="data-overview__list-cell"><img
                src="https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_1.png"></span>
                <span class="data-overview__list-cell">吴燕璇/13790756536</span>
                <span class="data-overview__list-cell">19572.84</span>
              </div>
            </div>
          </div>
          <div class="data-overview__section-ft">
            <a href="memberCardConsumptionRanking.php" class="data-overview__more">
              更多
              <img src="../../../public/img/rightjiantou.png">
            </a></div>
        </div>
        <div class="data-overview__section posr">
          <div class="data-overview__section-hd">
            <div class="data-overview__section-hd-title">教练上课排行榜</div>
            <div class="data-overview__section-hd-switch">
              <span class="data-overview__cycle" :class="jlsktime == 1?'current':''" @click="jlsk(1)">本月</span>
              <span class="data-overview__cycle" :class="jlsktime == 2?'current':''" @click="jlsk(2)">上月</span>
              <span class="data-overview__cycle" :class="jlsktime == 3?'current':''" @click="jlsk(3)">本年</span>
            </div>
          </div>
          <div class="data-overview__section-bd">
            <div class="data-overview__section-bd-hd"><span class="data-overview__section-label">排名</span> <span
              class="data-overview__section-label"
            >教练姓名</span> <span
              class="data-overview__section-label"
            >上课节数</span></div>
            <div class="data-overview__section-bd-list">

                <div class="data-overview__list-item" v-for="(item,index) in list.jlsk">
                  <span class="data-overview__list-cell" v-if="index<3">
                    <img :src="'https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_'+(index+1)+'.png'">
                  </span>
                  <span class="data-overview__list-cell" v-else>
                    {{index+1}}
                  </span>
                  <span class="data-overview__list-cell">{{ item.name }}/{{ item.tel }}</span>
                  <span class="data-overview__list-cell">{{ item.count }}</span>
                </div>
            </div>
          </div>
          <div class="data-overview__section-ft"><a href="coachAnalysis.php" class="data-overview__more">更多

            <img src="../../../public/img/rightjiantou.png"></a></div>
        </div>
        <div class="data-overview__section posr">
          <div class="data-overview__section-hd">
            <div class="data-overview__section-hd-title">消费排行榜</div>
            <div class="data-overview__section-hd-switch">
              <span class="data-overview__cycle" :class="xfphbtime == 1?'current':''" @click="xfphb(1)">本月</span>
              <span class="data-overview__cycle" :class="xfphbtime == 2?'current':''" @click="xfphb(2)">上月</span>
              <span class="data-overview__cycle" :class="xfphbtime == 3?'current':''" @click="xfphb(3)">本年</span>
            </div>
          </div>
          <div class="data-overview__section-bd">
            <div class="data-overview__section-bd-hd"><span class="data-overview__section-label">排名</span> <span
              class="data-overview__section-label"
            >会员</span> <span
              class="data-overview__section-label"
            >消费金额</span></div>
            <div class="data-overview__section-bd-list">

              <div class="data-overview__list-item" v-for="(item,index) in list.xfphb">
                  <span class="data-overview__list-cell" v-if="index<3">
                    <img :src="'https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_'+(index+1)+'.png'">
                  </span>
                <span class="data-overview__list-cell" v-else>
                    {{index+1}}
                  </span>
                <span class="data-overview__list-cell">{{ item.realname!=null?item.realname:item.nickname!=null?item.nickname:'微信用户' }}/{{ item.tel }}</span>
                <span class="data-overview__list-cell">{{ item.count }}</span>
              </div>

            </div>
          </div>
          <div class="data-overview__section-ft"><a href="memberCostRanking.php" class="data-overview__more">
            更多
            <img src="../../../public/img/rightjiantou.png"></a></div>
        </div>
        <div class="data-overview__section posr">
          <div class="data-overview__section-hd">
            <div class="data-overview__section-hd-title">课程排行榜</div>
            <div class="data-overview__section-hd-switch">
              <span class="data-overview__cycle" :class="kcphbtime == 1?'current':''" @click="kcphb(1)">本月</span>
              <span class="data-overview__cycle" :class="kcphbtime == 2?'current':''" @click="kcphb(2)">上月</span>
              <span class="data-overview__cycle" :class="kcphbtime == 3?'current':''" @click="kcphb(3)">本年</span>
            </div>
          </div>
          <div class="data-overview__section-bd">
            <div class="data-overview__section-bd-hd"><span class="data-overview__section-label">排名</span> <span
              class="data-overview__section-label"
            >课程名称</span> <span
              class="data-overview__section-label"
            >耗卡金额</span></div>
            <div class="data-overview__section-bd-list">
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><img
                src="https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_1.png"
              ></span> <span
                class="data-overview__list-cell"
              >塑形</span> <span
                class="data-overview__list-cell"
              >1719.00</span></div>
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><img
                src="https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_2.png"
              ></span> <span
                class="data-overview__list-cell"
              >体态调整</span> <span
                class="data-overview__list-cell"
              >1324.44</span></div>
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><img
                src="https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_3.png"
              ></span> <span
                class="data-overview__list-cell"
              >大器械-综合塑形</span> <span
                class="data-overview__list-cell"
              >1244.99</span></div>
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><span
                class="data-overview__cell-ranking"
              >4</span></span> <span
                class="data-overview__list-cell"
              >大器械-蜜桃臀</span> <span
                class="data-overview__list-cell"
              >901.81</span></div>
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><span
                class="data-overview__cell-ranking"
              >5</span></span> <span
                class="data-overview__list-cell"
              >大器械-完美女神</span> <span
                class="data-overview__list-cell"
              >852.48</span></div>
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><span
                class="data-overview__cell-ranking"
              >6</span></span> <span
                class="data-overview__list-cell"
              >肩颈瑜伽</span> <span
                class="data-overview__list-cell"
              >824.14</span></div>
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><span
                class="data-overview__cell-ranking"
              >7</span></span> <span
                class="data-overview__list-cell"
              >辅助瑜伽-轮</span> <span
                class="data-overview__list-cell"
              >664.53</span></div>
              <div class="data-overview__list-item"><span class="data-overview__list-cell"><span
                class="data-overview__cell-ranking"
              >8</span></span> <span
                class="data-overview__list-cell"
              >大器械-蝴蝶背</span> <span
                class="data-overview__list-cell"
              >599.64</span></div>
            </div>
          </div>
          <div class="data-overview__section-ft"><a href="courseAnalysis.php" class="data-overview__more">
            更多
            <img src="../../../public/img/rightjiantou.png"></a></div>
        </div>
      </div>
    </div>
  </div></template>

<script>
// import fetchList from '@/api/article'
import { getXuan } from '@/utils/limits.js'
import {
  recordAlter,
  dataOverview
} from '@/api/information';
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      is_show: false,
      skhktime: 1,
      jlsktime: 1,
      xfphbtime: 1,
      kcphbtime: 1,
      list:[]
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '数据概览',
      url: '/information/dataOverview',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })

    this.getList()
  },
  methods: {
    skhk(type){
      this.skhktime = type
      this.getList()
    },
    jlsk(type){
      this.jlsktime = type
      this.getList()
    },
    xfphb(type){
      this.xfphbtime = type
      this.getList()
    },
    kcphb(type){
      this.kcphbtime = type
      this.getList()
    },
    getList() {
      this.listLoading = true
      var data = {
        skhktime:this.skhktime,
        jlsktime:this.jlsktime,
        xfphbtime:this.xfphbtime,
        kcphbtime:this.kcphbtime,
      }
      dataOverview(data).then(response => {
        const {
          data
        } = response
        console.log(data);
        this.list = data
        console.log(this.list);
        this.listLoading = false
      });
    },
    open() {
      this.is_show = true
    },
    close() {
      this.is_show = false
    }
  }
}
</script>

<style scoped>
.data-overview-wrap {
  font-size: 14px;
  background: #f2f2f2;
}
.data-overview {
  padding: 30px 63px;
}
.data-overview__overview {
  position: relative;
  width: 1080px;
  margin: 0 auto 20px;
}
.data-overview__ranking {
  width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.data-overview__overview-hd {
  position: relative;
  height: 28px;
}
.data-overview__overview-title {
  line-height: 1;
  font-size: 16px;
  font-weight: 700;
}
.data-overview__tips {
  position: absolute;
  right: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url(../../../public/img/mark.svg) no-repeat left center;
  background-size: contain;
  cursor: pointer;
}
.data-overview__tips-bd {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 20;
  background: #5b5e62;
  color: #ffffff;
  padding: 20px;
  text-align: left;
}
.overview-title__desc {
   margin-left: 12px;
   display: inline-block;
   font-size: 12px;
   font-weight: 400;
   color: #787878;
 }
.data-overview__tips-item:not(:last-child) {
  margin-bottom: 10px;
}
.data-overview__tips-item {
  line-height: 1.5;
}
.data-overview__tips-label {
  font-weight: 700;
}
.data-overview__overview-bd {
  display: flex;
  flex-wrap: wrap;
}
.data-overview__overview-item {
  margin: 0 10px 10px 0;
  width: 260px;
  height: 104px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 20px 16px 0;
}
.data-overview__overview-item-title {
  font-size: 12px;
  color: #787878;
}
.data-overview__overview-item-value {
  margin-top: 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.data-overview__overview-item:nth-child(1) {
  background: #fff url('../../../public/img/bysrje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(2) {
  background: #fff url('../../../public/img/byhkje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(3) {
  background: #fff url('../../../public/img/sysrje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(4) {
  background: #fff url('../../../public/img/syhkje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(5) {
  background: #fff url('../../../public/img/bnsrje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(6) {
  background: #fff url('../../../public/img/bnhkje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(7) {
  background: #fff url('../../../public/img/zsrje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(8) {
  background: #fff url('../../../public/img/zhkje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__overview-item:nth-child(9) {
  background: #fff url('../../../public/img/syzcje.png') no-repeat center right 16px;
  background-size: 40px 40px;
}
.data-overview__section {
  box-sizing: border-box;
  width: 530px;
  padding: 16px 16px 46px;
  background: #fff;
  border-radius: 8px;
  margin: 0 10px 10px 0;
}

.posr {
  position: relative;
}
.data-overview__section-hd {
  margin-bottom: 10px;
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.data-overview__section-ft {
  position: absolute;
  right: 16px;
  bottom: 16px;
  text-align: right;
}
.data-overview__section-hd-title {
  font-size: 16px;
  font-weight: 700;
}
.data-overview__section-hd-switch {
  display: flex;
}
.data-overview__cycle.current {
  border: 1px solid #f49352;
  color: #f49352;
  z-index: 2;
}

.data-overview__cycle:first-child {
  border-radius: 4px 0 0 4px;
}
.data-overview__cycle {
  position: relative;
  margin-left: -1px;
  width: 62px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #d9d9d9;
  color: #787878;
  cursor: pointer;
}
.data-overview__more {
  display: inline-block;
}
.data-overview__more img{
  width: 12px;
  height: 12px;
}
.data-overview__cell-ranking {
  display: inline-block;
  min-width: 31px;
  text-align: center;
}
a {
  text-decoration: none;
  color: #41c3a8;
  display: inline-block;
}
.data-overview__section-bd-hd {
  display: flex;
  height: 42px;
  align-items: center;
}
.data-overview__section-label:nth-child(1) {
  width: 116px;
  padding-left: 12px;
}

.data-overview__section-label {
  font-size: 12px;
  color: #787878;
}
.data-overview__section-label:nth-child(2) {
  flex: 1;
}
.data-overview__section-label:nth-child(3) {
  width: 120px;
}
.data-overview__list-item:nth-child(odd) {
  background: #f6f6f6;
}

.data-overview__list-item {
  display: flex;
  height: 42px;
  align-items: center;
}
.data-overview__list-cell:nth-child(1) {
  width: 116px;
  padding-left: 12px;
}
.data-overview__list-cell:nth-child(2) {
  flex: 1;
  padding-right: 10px;
}
.data-overview__list-cell:nth-child(3) {
  width: 120px;
}
.data-overview__list-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-overview__svg-more {
  margin-left: 8px;
  width: 10px;
  height: 12px;
  transform: rotate(270deg);
  vertical-align: -1px;
}
.data-overview__tips-bd::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #5b5e62;
  right: 0;
  top: -20px;
}
</style>
